// 定义懒加载插件
// vueuse的函数
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app){
        // 懒加载指令逻辑
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el: 指令绑定的那个元素 img
                // binding: binding.value 指令等于号后面绑定的表达式的值  图片url
                //console.log(el, binding.value)
        
                const { stop }=useIntersectionObserver(
                    el,  // 指定监听是否进入到视口区域的元素
                    ([{ isIntersecting }]) => {
                        // isIntersecting是boolean值,实时告诉我们当前监听的元素是否进入到视口区域
                        // console.log(isIntersecting)
                        if (isIntersecting) { 
                            // 进入到视口区域
                            el.src = binding.value
                            // 第一次图片加载完毕调用stop()方法,为其手动停止监听,以防止重复监听
                            stop()
                        }
                    },
                )
            }
        })
    }
}